<template>
	<view class="main_bg">
		<app-headerIndex :title="classifyInfo.district_name || '首页'" :isBack="false">
			<template slot="left">
				<u-icon name="arrow-left" size="20" color="#FFFFFF" @click="resetClassify()"
					v-if="classifyInfo.district_name"></u-icon>
			</template>
		</app-headerIndex>
		<scroll-view scroll-y="true" class="scroll-y" @scrolltolower="lower" :style="{height:scrollHeight}">
			<view class="search">
				<view class="input flex-s">
					<u-icon name="scan" color="#4F6FF6" size="48rpx" @click="scanCode"></u-icon>
					<!-- <input v-model="key" placeholder="请输入机器编码" /> -->
					<u--input placeholder="请输入机器编码" border="none" v-model="key" clearable></u--input>
					<view class="btn flex-c" @click="search">搜索</view>
				</view>
			</view>
			<view class="swiper">
				<swiper style="height: 100%;" circular indicator-dots :autoplay="true" :interval="10000"
					:duration="500">
					<swiper-item v-for="(item,index) in banner" :key="index">
						<view class="swiper-item uni-bg-red" :style="'background-image: url('+item.image+');'">

						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="index_title flex-s">
				<view class="positon  flex-c">
					<view @click="resetClassify" :class="[classifyInfo.district_name&&'active']">我的设备</view>
					<!-- 			<view class="flex-c" v-if="classifyInfo.district_name"><u-icon size="32rpx"
							name="arrow-right"></u-icon>
						{{classifyInfo.district_name}}
					</view> -->
				</view>
				<view class="more"
					@click="$func.toUrl('/pages_user/device/list?type_id='+classifyInfo.id+'&type_name='+classifyInfo.district_name)"
					v-if="classifyInfo.district_name">查看更多</view>
			</view>
			<view class="classify flex-c" v-if="!classifyInfo.id">
				<view class="classify_son flex-c" v-for="(item,index) in classifyInit" :key="index"
					@click="setClassify(item)">
					{{item.district_name}}
				</view>

			</view>
			<view v-if="classifyInfo.id">
				<view class="cards flex-c" v-if="userInfo.type==1">
					<view class="cards_son flex-c"
						@click="$func.toUrl('/pages_user/device/list?status=0&type_id='+classifyInfo.id+'&type_name='+classifyInfo.district_name)">
						<view class="num">{{info.count0 || 0}}台</view>
						<view class="desc">正常</view>
					</view>

					<view class="cards_son flex-c"
						@click="$func.toUrl('/pages_user/device/list?status=1&type_id='+classifyInfo.id+'&type_name='+classifyInfo.district_name)">
						<view class="num">{{info.count1 || 0}}台</view>
						<view class="desc">停机</view>
					</view>

					<view class="cards_son flex-c"
						@click="$func.toUrl('/pages_user/device/list?status=2&type_id='+classifyInfo.id+'&type_name='+classifyInfo.district_name)">
						<view class="num">{{info.count2 || 0}}台</view>
						<view class="desc">异常可使用</view>
					</view>
					<view class="cards_son flex-c"
						@click="$func.toUrl('/pages_user/repair/repair?type_id='+classifyInfo.id)">
						<view class="num">{{info.count3 || 0}}</view>
						<view class="desc">维修中</view>
					</view>
					<view class="cards_son flex-c"
						@click="$func.toUrl('/pages_user/inspection/inspection?inspection_status=0&type_id='+classifyInfo.id)">
						<view class="num">{{info.count4 || 0}}</view>
						<view class="desc">巡检逾期</view>
					</view>
				</view>
				<view class="device_list">
					<view class="list" v-if="finish && list.length==0">
						<u-empty mode="data" text="搜索不到任何结果哦"></u-empty>
					</view>
					<view v-for="(item,index) in list" :key="index">
						<app-deviceCard :itemDetail="item" :index="index" :active="active" @setActive="setActive"
							@getList="getClassifyInit"></app-deviceCard>
					</view>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	const systemInfo = uni.getSystemInfoSync();
	const safeArea = systemInfo.safeArea;
	export default {
		data() {
			return {
				active: -1,
				key: '',
				query: {
					page: 1,
					pageSize: 99999,
					type_id: 0,
				},
				list: [],
				total: 0,
				loading: false,
				finish: false,
				classifyInit: [],
				classifyInfo: {},
				banner: [],
				info: {},
				typeId: 0,
			}
		},
		computed: {
			userInfo() {
				return this.$store.state.user.info
			},
			scrollHeight() {
				return 'calc(' + safeArea.height + 'px - 94px)'
			},
		},
		created() {
			this.getDevice()
			this.getClassifyInit()
		},
		methods: {
			search() {
				if (!this.key) {
					this.$func.tips('请输入设备编号')
					return
				}
				this.$func.toUrl("/pages_user/device/list?name=" + this.key)
			},
			scanCode() {
				uni.scanCode({
					success: (res) => {


						const data = decodeURIComponent(res.path)
						const arr = data.split('=')
						const deviceId = arr.length > 1 ? arr[arr.length - 1] : 0

						this.$http.post('/data/api.auth.User/deviceVier', {
							id: deviceId
						}).then(res => {
							this.key = res.data && res.data.device_sn
						})


					}
				});
			},

			setActive(res) {
				this.active = res
			},
			setClassify(item) {

				this.classifyInfo = {
					...item
				}
				this.query.type_id = item.id
				this.list = []
				this.getClassifyInit()
				this.getDevice()
			},
			resetClassify() {
				this.classifyInfo = {}
			},
			getClassifyInit() {
				this.info = {}
				this.$http.post('/data/api.auth.User/index', {
					type_id: this.query.type_id
				}).then(res => {
					if (!this.query.type_id) {
						this.classifyInit = res.data.type_list
						this.banner = res.data.banner || []
					} else {
						this.info = res.data
					}

				})
			},
			lower() {
				if (this.list.length < this.total) {
					this.query.page = this.query.page + 1
					this.getDevice()
				} else {
					this.finish = true
				}
			},
			getDevice() {
				this.$http.post('/data/api.auth.User/devicelists', this.query).then(res => {
					this.list = [...this.list, ...res.data.list]
					this.total = res.data.page.total || 0
					this.loading = false
					this.finish = this.total == 0
				})
			}

		}
	}
</script>

<style scoped lang="scss">
	.search {
		background-color: #4F6FF6;
		padding: 20rpx 0 90rpx;

		.input {
			margin: 0 20rpx;
			padding: 0 10rpx;
			height: 84rpx;
			background: rgba(246, 246, 246, 1);
			border-radius: 46px;


			input {
				// border: none;
				flex: 1;
				font-size: 14px;
				margin: 0 10rpx;
			}

			.btn {
				width: 156rpx;
				height: 68rpx;
				background: rgba(79, 111, 246, 1);
				border-radius: 34rpx;
				color: #FFFFFF;
				font-size: 30rpx;
			}

		}
	}

	.swiper {
		margin: -60rpx 20rpx 60rpx;
		overflow: hidden;
		height: 304rpx;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.07);
		border-radius: 20rpx;

		.swiper-item {
			height: 304rpx;
			background-size: cover;
		}

	}

	.index_title {
		margin: 0 20rpx;

		.active {
			// color: #4F6FF6;
		}

		// justify-content: flex-start;
		.more {
			color: #4F6FF6;
			font-size: 28rpx;
		}
	}

	.classify {
		padding: 20rpx 20rpx 0 0;
		// background: #FFFFFF;
		border-radius: 20rpx;
		flex-wrap: wrap;
		justify-content: flex-start;


		.classify_son {
			width: calc(33.3333% - 20rpx);
			margin: 0 0 20rpx 20rpx;
			height: 158rpx;
			background-color: #4F6FF6;
			font-size: 32rpx;
			color: #FFFFFF;
			border-radius: 20rpx;
		}
	}

	.cards {
		margin: 20rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		flex-wrap: wrap;
		justify-content: flex-start;
		padding: 30rpx 0;

		.cards_son {
			width: 33.3333%;
			padding: 20rpx 0;

			flex-direction: column;
			// background: rgba(79, 111, 246, 1);
			border-radius: 20rpx;
			margin-bottom: 10px;
			font-size: 32rpx;
			color: #FFFFFF;

			.num {
				font-size: 40rpx;
				color: #4F6FF6;
			}

			.desc {
				font-size: 26rpx;
				color: #ADADAD;
			}

			&:nth-child(2) {
				.num {
					color: #F6B84F;
				}
			}

			&:nth-child(3) {
				.num {
					color: #0027CB;
				}
			}

			&:nth-child(4) {
				.num {
					color: #F68C4F;
				}
			}

			&:nth-child(5) {
				.num {
					color: #D81E06;
				}
			}
		}
	}

	.device_list {
		padding-bottom: 20rpx;

		.list {
			border-radius: 20rpx;
			margin: 20rpx;
			padding: 20rpx;
			background: rgba(255, 255, 255, 1);

			.card {
				align-items: flex-start;
			}

			.thumb {
				width: 218rpx;
				height: 218rpx;
				background: rgba(228, 228, 228, 1);
				border-radius: 10rpx;
				position: relative;

				.status {
					position: absolute;
					z-index: 99;
					padding: 0 10rpx;
					height: 34rpx;
					background: rgba(34, 202, 8, 1);
					border-radius: 10rpx 0px 10rpx 0px;
					font-size: 20rpx;
					color: #FFFFFF;
				}
			}

			.content {
				flex: 1;
				margin-left: 20rpx;

				.title {
					font-size: 36rpx;
					color: #333333;
					line-height: 36rpx;
				}

				.tag_flex {
					justify-content: flex-start;
					margin: 20rpx 0;
				}

				.tag {
					padding: 0px 10rpx;
					height: 52rpx;
					background: rgba(248, 248, 248, 1);
					border-radius: 10rpx;
					font-size: 24rpx;
					color: #ADADAD;
				}

				.desc {
					font-size: 24rpx;
					line-height: 34rpx;
					color: #ADADAD;
				}
			}

			.btns {
				justify-content: flex-end;

				.btns_son {
					padding: 0 20rpx;
					min-width: 100rpx;
					height: 70rpx;
					border-radius: 10rpx;
					font-size: 30rpx;
					color: #FFFFFF;
					margin-left: 10rpx;
					margin-top: 28rpx;
					position: relative;

					&:nth-child(1) {
						color: #D81E06;
					}

					&:nth-child(2) {
						background-color: #F68C4F;
					}

					&:nth-child(3) {
						background-color: #4F6FF6;
					}

					.change_status {
						display: none;
						position: absolute;
						left: 0;
						top: 70rpx;
						width: 100%;

						background: rgba(252, 146, 133, 1);
						border-radius: 10rpx;
						z-index: 99;
						overflow: hidden;

						.change_btn {
							height: 66rpx;
							font-size: 30rpx;
							color: #FFFFFF;
							border-radius: 10rpx;

							&:nth-child(1) {
								background-color: #D81E06;
							}

						}
					}

					&:hover {
						.change_status {

							display: block;


						}
					}

				}
			}
		}
	}
</style>